<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表结构生成器</title>
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/element.css">
    <!-- 引入组件库 -->
    <script src="/js/element.js"></script>

    <script src="/js/axios.min.js"></script>

    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div id="app">
    <el-container v-loading="loading"
                  element-loading-text="正在加载中..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-aside width="18%">
            <div class="title">表结构生成工具</div>
            <el-tree
                    style="margin: 10px"
                    ref="structureTree"
                    :data="data"
                    show-checkbox
                    node-key="key"
                    :props="defaultProps">
            </el-tree>
        </el-aside>
        <el-container>
            <el-main>
                <el-card class="box-card">
                    <div class="tool">
                        <el-button @click="dialogVisible = true" type="text">选择字段</el-button>
                        <el-button @click="preview" type="text">预览文件</el-button>
                        <el-button @click="download" type="text">下载word</el-button>
                    </div>
                    <iframe :src="pdf"></iframe>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
    <el-dialog
            title="选择字段"
            :visible.sync="dialogVisible"
            width="35%">
        <el-checkbox-group v-model="fieldList">
            <el-checkbox class="checkbox" v-for="item of fieldData" :label="item.key">{{item.value}}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
    <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
</div>
<script>
    // 创建一个新的 Vue 实例
    new Vue({
        el: '#app',
        data: {
            data: [],
            dialogVisible: false,
            fieldData: [
                {
                    key: 'columnName',
                    value: '字段名称'
                }, {
                    key: 'columnType',
                    value: '类型'
                }, {
                    key: 'columnComment',
                    value: '注释'
                }, {
                    key: 'isNullable',
                    value: '是否可以为空'
                }, {
                    key: 'columnDefault',
                    value: '默认值'
                },
            ],
            fieldList: [
                'columnName',
                'columnType',
                'columnComment'
            ],
            defaultProps: {
                children: 'children',
                label: 'value'
            },
            pdf: '',
            loading: false,
        },
        methods: {
            getTableTree() {
                this.loading = true
                axios.get('/generate/getTableTree').then(res => {
                    if (res.data.code === 200) {
                        this.data = res.data.data
                    }
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
            },
            preview() {
                if (this.getCheckedNodes().length === 0){
                    this.showMessage("error","当前未选中任何数据表!!!")
                    return;
                }
                this.loading = true
                axios({
                    method: 'post',
                    url: '/generate/pdf/preview',
                    responseType: 'arraybuffer', // 指定响应类型为二进制流
                    data: {dataList: this.getCheckedNodes(),fieldList:this.fieldList}
                }).then(res => {
                    const blob = new Blob([res.data], {type: "application/pdf"});
                    this.pdf = URL.createObjectURL(blob);
                    this.loading = false
                }).catch(err => {
                    this.showMessage("error",err.message)
                });
            },
            download() {
                if (this.getCheckedNodes().length === 0){
                    this.showMessage("error","当前未选中任何数据表!!!")
                    return;
                }
                this.loading = true
                axios({
                    method: 'post',
                    url: '/generate/download',
                    responseType: 'blob', // 指定响应类型为二进制流
                    data: {dataList: this.getCheckedNodes(), contentType: this.contentType,fieldList:this.fieldList}
                }).then(res => {
                    let blob = new Blob([res.data])
                    let url = window.URL.createObjectURL(blob)
                    let downloadElement = document.createElement('a')
                    downloadElement.style.display = 'none'
                    downloadElement.href = url
                    downloadElement.setAttribute('download', decodeURIComponent(res.headers['filename']))
                    document.body.appendChild(downloadElement)
                    downloadElement.click()
                    document.body.removeChild(downloadElement) // 下载完成移除元素
                    window.URL.revokeObjectURL(url) // 释放掉blob对象
                    this.loading = false
                    this.showMessage("success","下载成功")
                }).catch(err => {
                    this.showMessage("error",err.message)
                });
            },
            getCheckedNodes() {
                let tree = this.$refs.structureTree;
                let checkedNodes = tree.getCheckedNodes();
                let parentKeys = new Set(checkedNodes.filter(node => node.parentKey != null).map(node => node.parentKey));
                for (let parentKey of parentKeys) {
                    let node = tree.getNode(parentKey).data;
                    if (!checkedNodes.includes(node)) {
                        checkedNodes.push(node)
                    }
                }
                return checkedNodes;
            },
            showMessage(type, message) {
                this.$message({
                    message: message,
                    type: type,
                });
            },
        },

        mounted() {
            this.getTableTree()
        }
    });
</script>
</body>
</html>